<style>
  .country-container {
    margin-top: 0.5em;
    margin-bottom: 0.5em;

  }
  .country-container>button {
    width: 7em;
    margin-left: 4em;
  }
  .btn-set-receive {
    float: right;
    line-height: 0.42;
    font-size: 10px;
    width: 20%;
  }
  .addr-selected {
    border: 2px #cb2527 solid;
    border-radius: 10px;
  }
  .btn-confirm {
    text-align: center;
  }
  .btn-confirm>button{
    width: 60%
  }
</style>
<header class="mui-bar mui-bar-nav header">
  <h1 class="mui-title">收货地址</h1>
</header>
<div class="mui-content">
  <h5 class="order-tit">收货人信息</h5>
  <div class="country-container">
    <p style="text-align: center">收货地址</p>
    <button type="button" class="mui-btn" id="btn-cn">中国</button>
    <button type="button" class="mui-btn" id="btn-au">澳大利亚</button>
  </div>
  <div class="addr-container">
  </div>
  <div class="add-address">
    <a href="/user/address/add/">
      +新建收货地址
    </a>
    <i class="am-icon-angle-right"></i>
  </div>
  <div>
    <button type="button" class="mui-btn mui-btm-primary" id="btn-confirm">确认</button>
  </div>
</div>
<script src="/js/mui.picker.min.js"></script>
<script src="/js/data.city.js"></script>
<script>
  $('#btn-cn').click(function () {
    $(this).addClass('mui-btn-primary');
    $('#btn-au').removeClass('mui-btn-primary');
    $.get('/api/user/address/?customer_id='+sessionStorage.getItem('customer_id'), function (call) {
      console.log(call);
      var html = '';
      for(var i=0; i<call.length; i++){
        var receiver = call[i].name;
        var phone = call[i].tel;
        var addr = decodeURI(call[i].addr);
        html += '<div class="order-name"><input type="hidden" id="contact" value="'+call[i].id+'"><div><p class="order-tele">收件人：<span id="receiver-box">'+receiver+'</span>&nbsp;&nbsp;&nbsp;电话：<span id="phone-box">'+phone+'</span><button type="button" class="btn-set-receive mui-btn" onclick="setReceive(this)">收货地址</button></p><p class="order-add">&nbsp;&nbsp;&nbsp;地址：<span id="addr-box">'+addr+'</span></p></div><i class="am-icon-angle-right"></i></div>';
      };
      $('.addr-container').html(html);
    })
  });
  $('#btn-au').click(function () {
    $(this).addClass('mui-btn-primary');
    $('#btn-cn').removeClass('mui-btn-primary');
    var html = '<div class="order-name"><div><p class="order-tele">墨尔本</p><p class="order-add">地址：某个角落<button type="button" class="btn-set-receive mui-btn" onclick="setReceive(this)">收货地址</button></p></div><i class="am-icon-angle-right"></i></div><div class="order-name"><div><p class="order-tele">堪培拉</p><p class="order-add">地址：某个角落<button type="button" class="btn-set-receive mui-btn" onclick="setReceive(this)">收货地址</button></p></div><i class="am-icon-angle-right"></i></div>';
    $('.addr-container').html(html);
  })
  $('#btn-confirm').click(function () {
    var address = $('.addr-selected');
    if (address.length == 0) {
        alert('尚未选择收货地址')
    } else {
        var contact_id = $('.addr-selected #contact').val();
        console.log(contact_id);
        sessionStorage.setItem('contact_id', contact_id);
        window.location.href = '/order_confirm/<%= id%>?contact_id='+contact_id+'&customer_id='+sessionStorage.getItem('customer_id');
    }
  })
</script>
<script>
  function setReceive(that) {
    console.log($(that));
    $(that).parents().find('.order-name').removeClass('addr-selected');
    $(that).parents('.order-name').addClass('addr-selected');
  }
</script>
<script>
  $('.js-btn').click(function () {
    var address = $('.addr-selected');
    if (address.length == 0) {
      alert('尚未选择收货地址');
    } else {
      var receiver = $('.addr-selected #receiver-box').text();
      var phone = $('.addr-selected #phone-box').text();
      var addr = $('.addr-selected #addr-box').text();
      console.log(addr);
    }
  })
</script>
<script>
  var city_picker = new mui.PopPicker({layer:3});
  city_picker.setData(init_city_picker);
  $("#city-picker").on("tap", function(){
    setTimeout(function(){
      city_picker.show(function(items){
        $("#city-picker").val((items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text);
      });
    },200);
  });
</script>
<script>
  $('.mui-btn-primary').click(function () {
    var name = $('#receiver').val();
    var tel = $('#phone').val();
    if (tel == null){
        alert('请输入正确的电话号码');
    }
    var addr = $('#country').val()+$('#city-picker').val()+$('#detail').val();
    var customer_id = sessionStorage.getItem('customer_id');
    var json = {
      name: name,
      tel: tel,
      addr: addr
    };
    $.post('/api/user/address/?customer_id='+customer_id, json, function (err, call) {
      if (call == 'success'){
        mui.toast('新增收货地址');
        window.location.reload();
      }
    })
  });
  $('.mui-btn-danger').click(function () {
    $('.mui-input-group').css('display', 'none');
  })
</script>
